<template>
	<mescroll-uni @init="mescrollInit" :up="upOption" :down="downOption" @down="downCallback" @up="upCallback">
		<view class="cu-bar bg-white search" :style="[{top:CustomBar + 'px'}]">
			<picker v-if="queryList.length>1" mode="selector" :range="queryList" range-key="queryName"
				:value="queryIndex" @change="queryChange" style="padding-left: 20upx;">
				<view>
					<image style="width: 20upx;height: 33upx;" src="../../static/center/to.png"></image>
				</view>
			</picker>

			<view v-if="queryIndex==0" class="search-form round">
				<text class="cuIcon-search"></text>
				<input v-model="searchForm.shipumingcheng" type="text" placeholder="食谱名称">
			</view>
			<view v-if="queryIndex==1" class="search-form round">
				<text class="cuIcon-search"></text>
				<input v-model="searchForm.jijie" type="text" placeholder="季节">
			</view>

			<view class="action">
				<button @tap="search"
					:style="{width:'auto',borderRadius:'8rpx',height:'80rpx',fontSize:'28rpx',color:'#fff',backgroundColor:'#409eff',borderColor:'#409eff'}"
					class="cu-btn shadow-blur round">搜索</button>
			</view>
		</view>

		<view>
			<scroll-view scroll-x="true" class="tabView"
				:style='{"padding":"30rpx 0 0","boxShadow":"0 0 12rpx rgba(255,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,1)","backgroundColor":"rgba(218, 218, 218, 0.23)","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"100rpx"}'>
				<view :style='sitem' class="tab" v-for="(item,index) in categoryList" :key="index"
					:class="categoryName===item.jijie?'tabActive':''" @tap="categoryClick(item.jijie)">{{item.jijie}}
				</view>
			</scroll-view>


			<view class="list-box6"
				:style='{"padding":"24rpx","boxShadow":"0 0 12rpx rgba(255,0,0,0)","margin":"0","borderColor":"red","backgroundColor":"rgba(255, 255, 255, 1)","borderRadius":"0 0 20rpx 20rpx","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}'
				style="display: flex;flex-wrap: wrap;box-sizing: border-box;align-content: flex-start;">
				<block v-for="(product,index) in list" :key="index">
					<view @tap="onDetailTap(product)" class="list-item"
						:style='{"padding":"0","boxShadow":" 0px 6rpx 12rpx rgba(0, 0, 0, 0.16)","margin":"0 2% 20rpx 0","borderColor":"red","backgroundColor":"rgba(255,255,255,1)","borderRadius":"20rpx","borderWidth":"0","width":"48%","borderStyle":"solid","height":"auto"}'>
						<image
							:style='{"padding":"0","boxShadow":"0 0 12rpx rgba(255,0,0,0)","margin":"0 0 8rpx 0","borderColor":"red","backgroundColor":"rgba(255,0,0,0)","borderRadius":"20rpx","borderWidth":"0","width":"100%","borderStyle":"solid","height":"200rpx"}'
							mode="aspectFill"
							:src="product.shipufengmian?baseUrl+product.shipufengmian.split(',')[0]:''"></image>
						<view
							:style='{"padding":"10rpx 20rpx","boxShadow":"0 0 12rpx rgba(255,0,0,0)","margin":"0","borderColor":"red","backgroundColor":"rgba(255,0,0,0)","color":"#333","textAlign":"left","borderRadius":"0","borderWidth":"0","width":"100%","lineHeight":"36rpx","fontSize":"28rpx","borderStyle":"solid"}'
							class="title">{{product.shipumingcheng}}</view>
					</view>
				</block>
			</view>

		</view>


	</mescroll-uni>
</template>

<script>
	export default {
		data() {
			return {
				queryList: [{
						queryName: "食谱名称",
					},
					{
						queryName: "季节",
					},
				],
				sactiveItem: {
					"padding": "0 28rpx",
					"boxShadow": "0 0 0px rgba(0,0,0,.3)",
					"margin": "0 12rpx",
					"borderColor": "rgba(79, 74, 78, 1)",
					"backgroundColor": "rgba(209, 176, 134, 1)",
					"color": "#fff",
					"borderRadius": "0",
					"borderWidth": "4rpx 0 0",
					"width": "auto",
					"lineHeight": "68rpx",
					"fontSize": "28rpx",
					"borderStyle": "solid"
				},
				sitem: {
					"padding": "0 20rpx",
					"boxShadow": "0 0 0px rgba(0,0,0,.3)",
					"margin": "0 12rpx",
					"borderColor": "rgba(146, 146, 146, 1)",
					"backgroundColor": "rgba(206, 206, 206, 1)",
					"color": "rgba(146, 146, 146, 1)",
					"borderRadius": "0",
					"borderWidth": "4rpx 0 0",
					"width": "auto",
					"lineHeight": "60rpx",
					"fontSize": "28rpx",
					"borderStyle": "solid"
				},
				queryIndex: 0,
				list: [],
				userid: '',
				mescroll: null, //mescroll实例对象
				downOption: {
					auto: false //是否在初始化后,自动执行下拉回调callback; 默认true
				},
				upOption: {
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					textNoMore: '~ 没有更多了 ~',
				},
				hasNext: true,
				searchForm: {},
				categoryList: [],
				categoryName: '全部',
				CustomBar: '0'
			};
		},
		computed: {
			baseUrl() {
				return this.$base.url;
			}
		},
		async onShow() {

			let res = {};

			res = await this.$api.page('jijie', {
				page: 1,
				limit: 100
			});

			res.data.list.splice(0, 0, {
				id: 0,
				jijie: '全部'
			})
			this.categoryList = res.data.list;
			this.hasNext = true
			// 重新加载数据
			if (this.mescroll) this.mescroll.resetUpScroll()
		},
		onLoad(options) {
			if (options.userid) {
				this.userid = options.userid;
			} else {
				this.userid = "";
			}
			this.hasNext = true
			// 重新加载数据
			if (this.mescroll) this.mescroll.resetUpScroll()
		},
		methods: {
			//查询条件切换
			queryChange(e) {
				this.queryIndex = e.detail.value;
				this.searchForm.shipumingcheng = "";
				this.searchForm.jijie = "";
			},
			//类别搜索
			categoryClick(categoryName) {
				this.categoryName = categoryName;
				this.mescroll.resetUpScroll();
			},
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				this.hasNext = true
				// 重置分页参数页数为1
				mescroll.resetUpScroll()
			},
			/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
			async upCallback(mescroll) {
				let params = {
					page: mescroll.num,
					limit: mescroll.size
				}

				if (this.categoryName != '全部') {
					params.jijie = '%' + this.categoryName + '%'
				}

				if (this.searchForm.shipumingcheng) {
					params['shipumingcheng'] = '%' + this.searchForm.shipumingcheng + '%'
				}
				if (this.searchForm.jijie) {
					params['jijie'] = '%' + this.searchForm.jijie + '%'
				}



				let res = {}
				if (this.userid) {
					res = await this.$api.page(`jijieshipu`, params);
				} else {
					res = await this.$api.list(`jijieshipu`, params);
				}
				// 如果是第一页数据置空
				if (mescroll.num == 1) this.list = [];
				this.list = this.list.concat(res.data.list);
				if (res.data.list.length == 0) this.hasNext = false;
				mescroll.endSuccess(mescroll.size, this.hasNext);
			},
			// 详情
			onDetailTap(item) {
				uni.setStorageSync("useridTag", this.userid);
				this.$utils.jump(`./detail?id=${item.id}&userid=` + this.userid)
			},
			// 修改
			onUpdateTap(id) {
				uni.setStorageSync("useridTag", this.userid);
				this.$utils.jump(`./add-or-update?id=${id}`)
			},
			// 添加
			onAddTap() {
				uni.setStorageSync("useridTag", this.userid);
				this.$utils.jump(`./add-or-update`)
			},
			onDeleteTap(id) {
				var _this = this;
				uni.showModal({
					title: '提示',
					content: '是否确认删除',
					success: async function(res) {
						if (res.confirm) {
							await _this.$api.del('jijieshipu', JSON.stringify([id]));
							_this.hasNext = true
							// 重置分页参数页数为1
							_this.mescroll.resetUpScroll()
						}
					}
				});
			},
			// 搜索
			async search() {
				this.mescroll.num = 1
				let searchForm = {
					page: this.mescroll.num,
					limit: this.mescroll.size
				}
				if (this.searchForm.shipumingcheng) {
					searchForm['shipumingcheng'] = '%' + this.searchForm.shipumingcheng + '%'
				}
				if (this.searchForm.jijie) {
					searchForm['jijie'] = '%' + this.searchForm.jijie + '%'
				}
				let res = {};
				if (this.userid) {
					res = await this.$api.page(`jijieshipu`, searchForm);
				} else {
					res = await this.$api.list(`jijieshipu`, searchForm);
				}
				// 如果是第一页数据置空
				if (this.mescroll.num == 1) this.list = [];
				this.list = this.list.concat(res.data.list);
				if (res.data.list.length == 0) this.hasNext = false;
				this.mescroll.endSuccess(this.mescroll.size, this.hasNext);
			}
		}
	};
</script>

<style>
page {
  background: #f5f5f5;
}

view {
  font-size: 28upx;
}

.search-form {
  background: #fff;
  padding: 0 20rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  border-radius: 40rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.search-form .cuIcon-search {
  font-size: 36rpx;
  color: #999;
  margin-right: 10rpx;
}

.search-form input {
  flex: 1;
  height: 100%;
  font-size: 28rpx;
}

.tabView {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: #ffffff;
  height: 80upx;
  margin: 20upx 0;
  white-space: nowrap;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.tab {
  text-align: center;
  display: inline-block;
  margin: 0 12rpx;
  padding: 0 30rpx;
  width: auto;
  line-height: 60rpx;
  color: #666;
  font-size: 28rpx;
  border-radius: 30rpx;
  background-color: #f5f5f5;
  transition: all 0.3s;
}

.tabActive {
  color: #fff;
  background-color: #409eff;
  box-shadow: 0 4rpx 12rpx rgba(64,158,255,0.3);
}

.list-box6 {
  padding: 20rpx;
}

.list-item {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  transition: all 0.3s;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08);
}

.list-item:active {
  transform: scale(0.98);
}

.list-item image {
  width: 100%;
  height: 300rpx;
  object-fit: cover;
}

.list-item .title {
  padding: 20rpx;
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 其他样式保持不变 */
.uni-product-list {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  flex-direction: row;
  margin-top: 0upx;
}

.uni-product {
  padding: 10upx;
  margin: 10upx;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
}

.image-view {
  height: 330upx;
  width: 330upx;
  margin: 12upx 0;
}

.uni-product-image {
  height: 330upx;
  width: 330upx;
}

.uni-product-title {
  width: 300upx;
  word-break: break-all;
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.5;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.uni-product-price {
  margin-top: 10upx;
  font-size: 28upx;
  line-height: 1.5;
  position: relative;
}

.uni-product-price-original {
  color: #e80080;
}

.uni-product-price-favour {
  color: #888888;
  text-decoration: line-through;
  margin-left: 10upx;
}

.uni-product-tip {
  position: absolute;
  right: 10upx;
  background-color: #ff3333;
  color: #ffffff;
  padding: 0 10upx;
  border-radius: 5upx;
}

.add-btn {
  position: fixed;
  left: 30upx;
  right: 30upx;
  bottom: 106upx;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 690upx;
  height: 80upx;
  font-size: 32upx;
  color: #fff;
  background-color: #409eff;
  border-radius: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(64,158,255,0.3);
}

.list {
  padding: 20upx 20upx 20upx;
}

.listm {
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08);
  margin-bottom: 20upx;
  padding: 30upx;
}

.listmpic {
  border-radius: 12rpx;
  width: 166upx;
  margin-right: 20upx;
}

.listmr {
  display: inline-block;
  flex: 1;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.news-box6 .dian::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background-color: #409eff;
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 100%;
  z-index: 1;
}

.hide1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}

.hide2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.hide4 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
}
</style>
